<template>
  <div class="container">
    <el-dialog title="仓库搜索" :visible.sync="warehouseselect.centerDialogVisible" width="750px" center :lock-scroll="true"
      @open="getData">
      <div class="top">
        <el-input style="width: 200px; margin: 0 10px" v-model="search.value" placeholder="请输入仓库名称"></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" class="handleSearch"
          @click="handleSearch()">查询</el-button>
        <el-button class="add" size="small" type="primary" icon="el-icon-circle-plus" @click="addList()">添加</el-button>
      </div>
      <div class="tagList">
        <el-tag v-for="tag in tags" :key="tag.name" closable @close="handleClose(tag)">{{ tag.name }}</el-tag>
      </div>
      <el-table :data="formData" max-height="450px" border style="width: 100%; margin-top: 10px" ref="multipleTable"
        empty-text="暂无数据" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="50" align="center"></el-table-column>
        <el-table-column prop="house_code" label="仓库编码" align="center"></el-table-column>
        <el-table-column prop="house_name" label="仓库名称" align="center"></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.row.btnType" class="add" size="small" type="primary" icon="el-icon-circle-plus"
              @click="add(scope)">添加</el-button>
            <el-button v-else class="add" size="small" disabled type="primary" icon="el-icon-circle-plus">已添加</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { selectChooseWarehouse } from "@/api/commodity/commodityList"; //仓库
export default {
  props: {
    warehouseselect: Object,
  },
  data() {
    return {
      formData: null,
      search: {
        select: "",
        value: "",
      },
      tags: [],
      multipleSelection: [],
    };
  },
  methods: {
    handleSearch() {
      this.formData = [];
      this.getData();
    },

    getData() {
      this.formData = [];
      let data = {
        name: this.search.value,
        limit: 1000,
      };
      selectChooseWarehouse(data).then((res) => {
        if (res.code == 0) {
         
          let dataList = this.verify(res.data.data, this.tags)
          this.formData = dataList;
        }
      });
    },
    verify(data, tag) {
      data.forEach(prop => {
        prop.btnType = true
        tag.forEach(props => {
          if (prop.house_code == props.code) {
            prop.btnType = false
          }

        })
      })
      return data
    },
    //确定
    confirm() {
      this.$emit("tag", this.tags);
      this.cancel();
    },
    //取消
    cancel() {
      this.search.value = "";
      this.formData = [];
      this.warehouseselect.centerDialogVisible = false;
      this.tags = [];
    },
    //添加
    add(scope) {
      let arr = this.tags.filter((res) => {
        return res.code == scope.row.house_code;
      });
      if (arr.length > 0) {
        this.$message({
          type: "info",
          message: "该仓库已添加",
        });
      } else {
        this.tags.push({
          name: scope.row.house_name,
          code: scope.row.house_code,
          id: scope.row.id,
        });
        let dataList = this.verify(this.formData, this.tags)
        this.formData = dataList;

      }
    },
    // 勾选添加
    addList() {
      let arrData = []
      this.tags.forEach(prop => {
        arrData.push(prop.code)
      })
      this.multipleSelection.forEach(res => {
        if (!arrData.includes(res.code)) {
          this.tags.push(res)
        }
      })
      this.$refs.multipleTable.clearSelection();
      let dataList = this.verify(this.formData, this.tags)
      this.formData = dataList;
    },
    //选取
    handleSelectionChange(val) {
      this.multipleSelection = [];
      let valMain = val;
      valMain.forEach((res) => {
        this.multipleSelection.push({
          name: res.house_name,
          code: res.house_code,
          id: res.id,
        });
      });
    },
    //删除
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
      let dataList = this.verify(this.formData, this.tags)
      this.formData = dataList;
    },
  },
};
</script>
<style scoped>
.top {
  display: flex;
  /* justify-content: center; */
}

.tagList {
  margin-top: 10px;
}

.el-tag {
  margin-right: 5px;
  margin-top: 2px;
}
</style>